<template>
  <div id="app">
    <template v-for="item in list">
      <Input ref="input" :key="item.id" v-if="item.type === 1" v-bind="item" />
      <Radio
        ref="radio"
        :key="item.id"
        v-else-if="item.type === 2"
        v-bind="item"
      />
      <Checkbox
        ref="checkbox"
        :key="item.id"
        v-else-if="item.type === 3"
        v-bind="item"
      />
    </template>
    <button ref="btn" @click="submitAction">提交</button>
  </div>
</template>

<script>
import Input from "./components/Input.vue";
import Radio from "./components/Radio.vue";
import Checkbox from "./components/Checkbox.vue";
export default {
  components: {
    Input,
    Radio,
    Checkbox,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          type: 1, //文本输入框
          title: "姓名：",
        },
        {
          id: 2,
          type: 2, //单选框
          title: "是否熟练使用HTML标签？",
          options: ["熟练", "一般", "不熟练"],
        },
        {
          id: 3,
          type: 3, //多选框
          title: "是否接触过以下后端语言？",
          options: ["JAVA", "GO", "Python", "PHP"],
        },
      ],
    };
  },
  methods: {
    submitAction() {
      console.log(this.$refs.input[0].id, this.$refs.input[0].value);
      console.log(this.$refs.radio[0].id, this.$refs.radio[0].value);
      console.log(this.$refs.checkbox[0].id, this.$refs.checkbox[0].value);
    },
  },
  mounted() {
    console.log(this.$refs);
  },
};
</script>

<style></style>
